<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据核对</title>
  <!-- 重置样式，使得各浏览器样式更一致 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <!-- vant样式 -->
  <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/vant@4/lib/index.css" />
  <!-- 自定义样式 -->
  <link rel="stylesheet" href="../style/common.css" />
</head>

<body>
  <div class="road-survey-view" id="DataCheck">
    <div class="road-survey-view-content">
      <table style="width: 100%;" :style="scaleTable">
        <tr class="center">
          <th :colspan="4 + (headerList.length > 2 ? headerList.length - 3 : 0)">路口现场勘察记录表</th>
        </tr>
        <tr class="center">
          <th>勘查时间</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">{{baseMsg.time}}</td>
          <th>记录人</th>
          <td>{{baseMsg.user}}</td>
        </tr>
        <tr class="center">
          <th>路口名称</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
            {{baseMsg.roadName}}</td>
          <th>路口经纬度</th>
          <td>{{baseMsg.roadPosition}}</td>
        </tr>
        <tr class="center">
          <th>点位形状</th>
          <td :colspan="headerList.length > 2 ? headerList.length - 2 : 1">
            <van-radio-group v-model="baseMsg.roadShape" direction="horizontal">
              <van-radio :name="road.key" icon-size="18px" v-for="road in ROAD_SHAPE">
                <template v-if="road.showInput && baseMsg.roadShape === road.key">
                  <van-field :label="road.value" v-model="baseMsg.roadShapeExt" input-align="left">
                  </van-field>
                </template>
                <template v-else>
                  {{road.value}}
                </template>
              </van-radio>
            </van-radio-group>
          </td>
          <th>点位属性</th>
          <td>
            <van-radio-group v-model="baseMsg.dotType" direction="horizontal">
              <van-radio :name="dot.key" icon-size="18px" v-for="dot in DOT_TYPE">{{dot.value}}</van-radio>
            </van-radio-group>
          </td>
        </tr>
        <tr class="center" v-if="!isRoadWay">
          <th>信号机品牌</th>
          <td :colspan="3 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            <van-radio-group v-model="baseMsg.signalType" direction="horizontal">
              <van-radio :name="signal.key" icon-size="18px" v-for="signal in SIGNAL_TYPE">
                <template v-if="signal.showInput && baseMsg.signalType === signal.key">
                  <van-field :label="signal.value" v-model="baseMsg.signalTypeExt" input-align="left">
                  </van-field>
                </template>
                <template v-else>
                  {{signal.value}}
                </template>
              </van-radio>
            </van-radio-group>
          </td>
        </tr>
        <tr v-if="headerList.length > 1">
          <th colspan="2">方向</th>
          <template v-for="item in headerList.slice(1)">
            <th>{{item.value}}</th>
          </template>
        </tr>
        <template v-for="item in showDirectionConfig">
          <tr v-for="(child, index) in item.child">
            <th :rowspan="item.child.length" v-if="index === 0" :colSpan="item.child.length === 1 ? 2 : 1">
              {{item.value}}</th>
            <th v-if="item.child.length !== 1">{{child.value}}</th>
            <template v-for="dirItem in directionMsg">
              <td>
                <template v-if="!(child.hiddenKey && dirItem[child.relativeKey] === child.hiddenKey)">
                  <template v-if="child.key==='motorwayNumber'">
                    <template v-for="(road, index) in dirItem.motorwayList">
                      <div class="common-title">
                        车道{{index + 1}}
                      </div>
                      <div>
                        宽度: {{road.width}}米
                      </div>
                      <div class="direction-img-content">
                        <div v-for="item in DIRECTION_IMAGE" :key="item.key" @click="handleChangeDirection(item, road)"
                          :class="['direction-img-item direction-img-table-item', {'active': road.direction.includes(item.key)}]">
                          <img
                            :src="`../images/${road.direction.includes(item.key) ? 'active-' : ''}${item.value}.png`" />
                        </div>
                      </div>
                    </template>
                  </template>
                  <template v-else-if="child.type===CONTENT_TYPE.RADIO">
                    <van-radio-group v-model="dirItem[child.key]">
                      <van-radio :name="road.key" icon-size="18px" v-for="road in child.option">
                        <template v-if="road.showInput && dirItem[child.key] === road.key">
                          <van-field :label="road.value" v-model="dirItem[child.key + 'Ext']" input-align="left">
                          </van-field>
                        </template>
                        <template v-else>
                          {{road.value}}
                        </template>
                      </van-radio>
                    </van-radio-group>
                  </template>
                  <template v-else-if="child.type===CONTENT_TYPE.CHECKBOX">
                    <van-checkbox-group v-model="dirItem[child.key]" shape="square">
                      <van-checkbox :name="around.key" icon-size="18px" :label-disabled="true"
                        v-for="around in child.option">
                        <template v-if="around.showInput && dirItem[child.key].includes(around.key)">
                          <van-field :label="around.value" v-model="dirItem[child.key + 'Ext']" input-align="left">
                          </van-field>
                        </template>
                        <template v-else>
                          {{around.value}}
                        </template>
                      </van-checkbox>
                    </van-checkbox-group>
                  </template>
                  <template v-else>
                    <van-field v-model="dirItem[child.key]" input-align="left" :type="child.inputType || 'number'"
                      autosize></van-field>
                  </template>
                </template>
              </td>
            </template>
          </tr>
        </template>
        <tr class="center">
          <th :colspan="2">周围建筑物</th>
          <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            <van-checkbox-group v-model="baseMsg.aroundBuilding" shape="square" direction="horizontal">
              <van-checkbox :name="around.key" icon-size="18px" v-for="around in AROUND_BUILDING"
                :label-disabled="true">
                <template v-if="around.showInput && baseMsg.aroundBuilding.includes(around.key)">
                  <van-field :label="around.value" v-model="baseMsg.aroundBuildingExt" input-align="left">
                  </van-field>
                </template>
                <template v-else>
                  {{around.value}}
                </template>
              </van-checkbox>
            </van-checkbox-group>
          </td>
        </tr>
        <tr>
          <th :colspan="2">拍照</th>
          <td :colspan="2 + (headerList.length > 2 ? headerList.length - 3 : 0)">
            用水印相机拍照留存每个勘察路口的各个方向车道、电警杆、信号灯杆，水印要标注清楚路口、方向。
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
<script src="https://fastly.jsdelivr.net/npm/vue@3"></script>
<script src="https://fastly.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script>
<script src="../js/methods.js"></script>
<script>
  const { createApp, ref, nextTick, reactive, onMounted, onUnmounted, computed, watch } = Vue
  const app = Vue.createApp({
    setup() {
      // 顶部选择器
      const headerList = ref([baseHeader])

      // 基础信息
      const baseMsg = ref(JSON.parse(JSON.stringify(base)))

      // 方向信息的全量
      const directionMsg = ref([])

      /**
       * 修改当前的转向信息
       * @item  当前点击的数据
       * @road 维护的数据
       */
      const handleChangeDirection = (item, road) => {
        const result = road.direction.findIndex(roadItem => roadItem === item.key)
        if (result > -1) {
          road.direction.splice(result, 1)
          return
        }
        road.direction.push(item.key)
      }

      const timer = ref(null)

      // local存储
      const setLocalMsg = () => {
        setLocal('baseMsg', baseMsg.value)
        setLocal('directionMsg', directionMsg.value)
        setLocal('headerList', headerList.value)
      }

      /**
       * 是否路段
       * 如果点位形状选择了“路段”，则后面不显示“信号机品牌”、“信号灯杆”、“机动车信号灯”等栏的输入项
       */
      const isRoadWay = computed(() => {
        return baseMsg.value.roadShape === LD_KEY
      })

      // 需要填写的数据，因为路段时候会过滤一些信息
      const showDirectionConfig = computed(() => {
        let list = JSON.parse(JSON.stringify(DIRECTION_CONFIG))
        list = list.filter(item => !(item.hiddenKey?.includes(LD_KEY) && isRoadWay.value))
        return list
      })

      // local获取
      const getLocalMsg = () => {
        baseMsg.value = getLocal('baseMsg') || JSON.parse(JSON.stringify(base))
        directionMsg.value = getLocal('directionMsg') || []
        headerList.value = getLocal('headerList') || [baseHeader]
      }

      const scaleTable = computed(() => {
        const scale = parseFloat(window.innerWidth) / 800 - 0.01
        return `transform: scale(${scale}); transform-origin: top left; overflow: auto`
      })

      const pageUnload = () => {
        setLocalMsg()
        timer.value && clearInterval(timer.value)
      }

      onMounted(async () => {
        getLocalMsg()
        // 每5秒自动更新缓存
        timer.value = setInterval(() => {
          setLocalMsg()
        }, 5 * 1000)
        // 监听iframe卸载事件
        window.addEventListener('beforeunload', () => {
          pageUnload()
        });
      })

      // 页面销毁时，先进行数据的保存
      onUnmounted(() => {
        pageUnload()
      })

      return {
        // 外部导入的内容导出
        ROAD_SHAPE, DOT_TYPE, SIGNAL_TYPE, AROUND_BUILDING, CONTENT_TYPE,
        DIRECTION_IMAGE,
        // 基础定义的内容导出
        headerList, baseMsg, directionMsg,
        // computed定义的计算属性
        scaleTable, isRoadWay, showDirectionConfig,
        // 方法导出
        handleChangeDirection
      }
    }
  })
  app.use(vant);
  app.use(vant.Lazyload);
  app.mount("#DataCheck");
</script>

</html>